    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>第二十天keyup按键switch变色</title>
        <script src="jquery-3.4.1.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                width: 500px;
                margin: 100px auto;
            }
            .box{
                width: 300px;
                height: 105px;
                border: 1px solid #4441c6;
                background: #8dd1f0;
                /*margin: 100px auto;*/
                padding-top: 80px;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        按按键就知道是什么颜色
        <div class="box">
            你所按键的keyCode是：<span class="spn">?</span>
        </div>
    </div>
    <script>
        $(function () {
            $(document).on("keyup",function (e) {
                console.log(e.keyCode);

                // switch (CODE) {
                //     case 89:
                //         setEle(color,CODE)
                //         $('.box').css("background-color","yellow");//background是元素的css属性，并未元素自身的属性
                //         $('.spn').text(e.keyCode);
                //         break;
                //     case 82:
                //         $('.box').css("background-color","red");//background是元素的css属性，并未元素自身的属性
                //         $('.spn').text(e.keyCode);
                //         break;
                //     case 71:
                //         $('.box').css("background-color","green");//background是元素的css属性，并未元素自身的属性
                //         $('.spn').text(e.keyCode);
                //         break;
                //     case 79:
                //         $('.box').css("background-color","orange");//background是元素的css属性，并未元素自身的属性
                //         $('.spn').text(e.keyCode);
                //         break;
                //     default:
                //         alert("小本经营没有您所需要的颜色！");
                //
                // }



                setColor(e.keyCode)



             function setColor(CODE) {
                 switch (CODE) {
                     case 89:
                         setEle("yellow",CODE)

                         break;
                     case 82:
                         setEle("red",CODE)
                         break;
                     case 71:
                         setEle("green",CODE)
                         break;
                     case 79:
                         setEle("orange",CODE)
                         break;
                     default:
                         alert("小本经营没有您所需要的颜色！");

                 }
    }
            function setEle(color,CODE) {
                $('.box').css("background-color",color);//background是元素的css属性，并未元素自身的属性
                $('.spn').text(CODE);
            }

            })

        })
    </script>
    </body>
    </html>